<template>
	<view class="start-page">
		<u-navbar title="订单详情" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="cont">
			<view v-if="myinfo.avatar">
				<image :src="'https://m.lqvvvv.com'+ myinfo.avatar" mode=""></image>
			</view>
			<view v-if="info.user_avatar">
				<image :src="'https://m.lqvvvv.com'+info.user_avatar" mode=""></image>
			</view>
		</view>
		<view class="tisp" v-if="info.finish_status == 0">
			订单进行中......
		</view>
		<view class="tisp" v-if="info.finish_status == 1">
			订单已结束
		</view>
		<view class="count-down">
			<u-count-down :time="remainingTimeMs" @change="onChange" format="HH:mm:ss" autoStart millisecond @finish="finish">
				<view class="time">
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
					</view>
					<text class="time__doc">:</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.minutes||'00' }}</text>
					</view>
					<text class="time__doc">:</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.seconds||'00' }}</text>
					</view>
				</view>
			</u-count-down>
		</view>
		<view class="down-info">
			为了协助保护双方安全您的定位可分享好友或自动保存到您的手机旅趣APP为保护隐私不会保存双方定位等信息
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info: {},
				myinfo: {},
				timeData: {},
				remainingTimeMs: ''
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.postdetails()
			this.getuserinfo()
		},
		methods: {
			finish(){
				this.info.finish_status = 1
			},
			postdetails() {
				let params = {
					orderid: this.id,
				}
				this.$Request({
					method: 'POST',
					url: '/api/friend_order/getDetail',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.info = res.data
						let timestamp = Math.floor(Date.now() / 1000);
						let endtime = this.info.true_finish_time - timestamp
						console.log(endtime)
						if(endtime > 0){
							this.remainingTimeMs = endtime * 1000
						}
						
					}
				})
			},
			onChange(e) {
				this.timeData = e
			},
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.myinfo = res.data
					}
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.start-page {
		height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/my/order-bg.png');
		background-size: 100% 100vh;

		.cont {
			width: 638rpx;
			height: 638rpx;
			background-image: url('https://m.lqvvvv.com/assets/static/my/xinbg.png');
			background-size: 100% 100%;
			margin: 0 auto;
			margin-top: 40rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 100%;
			}
		}

		.tisp {
			text-align: center;
			margin-top: 20rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.count-down {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;

			.time {
				@include flex;
				align-items: center;

				&__custom {
					margin-top: 4px;
					width: 26px;
					height: 26px;
					background-color: #2E314A;
					border-radius: 4px;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;

					&__item {
						color: #fff;
						font-size: 16px;
						text-align: center;
					}
				}

				&__doc {
					color: #fff;
					padding: 0px 4px;
				}

				&__item {
					color: #606266;
					font-size: 16px;
					margin-right: 4px;
				}
			}
		}
		.btn{
			width: 300rpx;
			margin: 0 auto;
			padding: 30rpx;
			margin-top: 30rpx;
		}
		.down-info {
			padding: 30rpx;
			background: linear-gradient(90deg, rgba(255, 101, 161, 0.5) 0%, rgba(126, 14, 163, 0.5) 100%);
			border-radius: 30rpx;
			border: 2rpx solid #E4ADFF;
			margin: 50rpx 30rpx 30rpx 30rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
		}
	}
</style>